<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="2" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.hit }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >分析结果图表</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 图表1开始 -->
            <el-divider></el-divider>
            <el-row>
              <h6>柱状分析图</h6>
            </el-row>
            <div
              id="myChart1"
              :style="{ width: '600px', height: '600px' }"
            ></div>
            <el-divider></el-divider>
            <!-- 图表1结束 -->
            <!-- 表格开始 -->
            <el-row>
              <el-table
                border
                :data="stringTable"
                style="width: 100%; margin: 10px"
              >
                <el-table-column label="Index" prop="Index"> </el-table-column>
                <el-table-column label="Name" prop="Name"> </el-table-column>
                <el-table-column label="Score" prop="Score"> </el-table-column>
              </el-table>
            </el-row>
            <!-- 表格结束 -->
            <el-row style="margin-bottom: 60px">
              <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                <div class="grid-content unseealbe-content"></div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  plain
                  style="margin: 10px"
                  @click="cuculateByGfjAlgo()"
                  v-loading.fullscreen.lock="fullscreenLoading"
                  >提交</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="2" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
var echarts = require("echarts");
export default {
  data() {
    return {
      name: "Echarts",
      paths: [
        { path: "/", hit: "首页" },
        { path: "/algo", hit: "分析算法" },
        { path: "/algo/enrich-gfj/enrich-input", hit: "富集分析输入" },
        { path: "/algo/enrich-gfj/enrich-graph", hit: "富集分析图表" },
      ],
      chart1Data: [],
      stringTable: [],
    };
  },
  created() {},
  mounted() {
    algo.GetSessionData().then((response) => {
      this.chart1Data = response.data.data.map.list;
      this.stringTable = response.data.data.map.stringTable;
      this.drawLine();
    });
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart1.setOption({
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            restore: { show: true },
            saveAsImage: {
              show: true,
              pixelRatio: 10,
              title: "保存为图片",
              type: "png",
              lang: ["点击保存"],
            },
          },
        },
        dataset: {
          source: this.chart1Data,
        },
        grid: { containLabel: true },
        xAxis: { name: "p value" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 0,
          max: 0.1,
          text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"],
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>